<template>
  <KView class="search-input" @click="searchClick">
    <KView class="search-input-content">
      <input v-model="inputValue" confirm-type="search" :placeholder="placeholder" :disabled="disabled" @change="inputChange" @confirm="inputConfirm">
    </KView>
    <KView class="search-input-icon">
      <img class="sys-img" :src="searchIcon" mode="aspectFit">
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  export default {
    props: {
      value: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: ''
      },
      disabled: {
        type: Object,
        default: false
      },
      hasConfirm: {
        type: Boolean,
        default: false
      }
    },

    watch: {
      value() {
        if (this.inputData !== null) {
          this.inputData = null;
          return;
        }
        this.inputValue = this.value;
      }
    },

    data() {
      return {
        inputValue: this.value,
        inputData: null,
        searchIcon: GlobalData.images.searchIcon
      };
    },

    methods: {
      searchClick() {
        this.$emit('click');
      },

      inputChange() {
        if (this.hasConfirm) {
          return;
        }

        let value = this.inputValue;
        this.inputData = value;
        this.$emit('input', value);
        this.$emit('change', value);
      },

      inputConfirm(event) {
        if (!this.hasConfirm) {
          return;
        }

        let value = this.inputValue;
        if (this.value !== value) {
          this.inputData = value;
          this.$emit('input', value);
        }
        this.$emit('confirm', value);
      }
    }
  };

</script>

<style lang="scss">
  .search-input {
    width: 100%;
    height: 100%;
    position: relative;

    .search-input-content {
      width: 100%;
      height: 100%;

      >input {
        width: calc(100% - #{formatPx(85)} - 2px);
        height: calc(100% - 2px);
        border: 1px solid #DADADA;
        border-radius: formatPx(8);
        padding-right: formatPx(60);
        padding-left: formatPx(25);
        font-size: formatPx(26);
      }
    }

    .search-input-icon {
      @extend .position-middle;
      width: formatPx(32);
      height: formatPx(32);
      right: formatPx(20);
    }
  }

</style>
